<template>
	<view class="content">
		<view class="form_top">
			<view class="u-flex info_box">
				<view class="form_tit">
					门店名称
				</view>
				<input type="text" v-model="name" placeholder="请输入门店名称">
			</view>
            <view class="info_box">
            	<view class="u-p-t-30 u-p-b-30">
            		门店地址
            	</view>
                <textarea v-model="address" placeholder="请选择门店地址" class="tit-t" :auto-height="true" disabled @click="chooseAddress"></textarea>
            </view>
			<view class="u-flex info_box" @click="show = true">
				<view class="form_tit">
					所属机构
				</view>
				<input type="text" v-model="store" placeholder="请选择机构" disabled>
				<image src="../../static/icons/bottom.png" mode="" class="bottom"></image>
			</view>
			<view class="u-flex info_box">
				<view class="form_tit">
					店长名称
				</view>
				<input type="text" v-model="shopName" placeholder="请输入店长名称">
			</view>
			<view class="u-flex info_box">
				<view class="form_tit">
					店长电话
				</view>
				<input type="number" v-model="shopPhone" placeholder="请输入店长电话">
			</view>
		</view>

		<view class="btn" @click="$noMultipleClicks(doSubmit)">提交</view>
        
        <!-- 所属机构弹窗 -->
        <u-popup mode="bottom" v-model="show">
            <view class="popup">
                <u-search placeholder="请输入机构名称" v-model="keyword" :show-action="false" @search="doSearch"></u-search>
                <scroll-view scroll-y="true" style="height: 500rpx;" @scrolltolower="getList()">
                    <view>
                        <view class="popup-item" v-for="(item, index) in list" :key="index"
                            :class="{active : item.id == storeId}" @click="choose(item)">
                            {{item.name}}
                        </view>
                    </view>
                </scroll-view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                noClick:true,//连点
                name: '',
                shopName: '',
                shopPhone: '',
				show: false,
				list: [],
                store: '',
                storeId: '',
                keyword: '',
                id: '',
                longitude: '',
                latitude: '',
                address: '',
			}
		},
        onLoad(option) {
            if (option.id) {
                this.id = option.id
                this.getData()
                uni.setNavigationBarTitle({
                	title:'编辑'
                })
            }
            this.getList()
        },
		methods: {
            chooseAddress() {
                const _this = this;
                uni.chooseLocation({
                    success: function (res) {
                        console.log('选择定位', res)
                        _this.longitude = res.longitude.toFixed(6);
                        _this.latitude = res.latitude.toFixed(6);
                        _this.address = res.address
                    }
                });
            },
            doSubmit() {
                if (!this.name) {
                    this.$toast('请输入门店名称！');
                    return false;
                }
                if (!this.address) {
                    this.$toast('请选择门店地址！');
                    return false;
                }
                if (!this.storeId) {
                    this.$toast('请选择机构！');
                    return false;
                }
                if (!this.shopName) {
                    this.$toast('请输入店长名称！');
                    return false;
                }
                if (!this.shopPhone) {
                    this.$toast('请输入店长电话！');
                    return false;
                }
                if (!this.$checkPhone(this.shopPhone)) {
                    this.$toast('手机号码格式不正确');
                    return false;
                }
                console.log({
                    address: this.address,//地址
                    longitude: this.longitude,//经度
                    latitude: this.latitude,//纬度
                })
                
                this.$ajax('stores_submit', {
                    user_token: this.$getSync('userToken'),
                    name: this.name,//名称
                    shop_name: this.shopName,//店长
                    shop_phone: this.shopPhone,//电话
                    institution_id: this.storeId,//机构id
                    id: this.id,//编辑 门店id
                    address: this.address,//地址
                    longitude: this.longitude,//经度
                    latitude: this.latitude,//纬度
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            // 选择机构
            choose(item) {
                this.store = item.name
                this.storeId = item.id
                setTimeout(() => {
                    this.show = false
                },200)
            },
            // 搜索机构
            doSearch() {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            // 获取机构列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('institution_manage', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    name: this.keyword,//搜索
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail.data && ret.detail.data.length > 0) {
            				this.list = this.list.concat(ret.detail.data);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            // 获取门店详情
            getData() {
            	this.$ajax('institution_detail', {
            		user_token: this.$getSync('userToken'),
            		id: this.id,
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.name = ret.detail.name
                        this.store = ret.detail.institution
                        this.storeId = ret.detail.institution_id
                        this.shopName = ret.detail.shop_name
                        this.shopPhone = ret.detail.shop_phone
                        this.longitude = ret.detail.longitude
                        this.latitude = ret.detail.latitude
                        this.address = ret.detail.address
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5 !important;
	}
</style>
<style scoped>
    .popup{
        padding: 24rpx;
    }
    .popup-item{
        padding: 20rpx 0;
        text-align: center;
    }
    .active{
        font-weight: bold;
        color: #00a1e9;
    }
    
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* border-top: 2rpx solid #ebebeb; */
		padding: 20rpx 20rpx 0;
	}

	.form_top {
		width: 100%;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 10rpx 24rpx 20rpx;
		margin-bottom: 68rpx;
	}

	.info_box {
		width: 100%;
		/* height: 96rpx; */
		border-bottom: 2rpx solid #e6e6e6;
	}

	.form_top .info_box:last-child {
		border-bottom: none;
	}
    textarea{
        width: 100%;
        padding-bottom: 20rpx;
    }
    .tit-t{
        min-height: 100rpx;
    }
	.form_tit {
		font-size: 28rpx;
		line-height: 96rpx;
		color: #000;
	}

	input {
		flex: 1;
		height: 96rpx;
		font-size: 28rpx;
		line-height: 96rpx;
		color: #000;
		text-align: right;
		padding-left: 20rpx
	}

	.form_bottom {
		width: 100%;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 10rpx 24rpx 20rpx;
		margin-bottom: 80rpx;
	}

	.btn {
		width: 686rpx;
		height: 92rpx;
		font-size: 36rpx;
		line-height: 92rpx;
		color: #fff;
		text-align: center;
		border-radius: 46rpx;
		background-color: #00a0e9;
	}

	.bottom {
		width: 20rpx;
		height: 12rpx;
		margin: 0 12rpx 0 18rpx;
	}
</style>
